<template>
    <div class="radiotypes">
        <Header :isBack="isBack" :title="title"></Header>
        <div class="content bg-f">
            <div class="type">
                <p class="title fs-32 center">热门分类</p>
                <div class="type-list flex wrap">
                    <div class="list-item center" v-for="item in hotcates" @click="gototypes(item)">
                        <div class="center-col">
                            <img :src="item.cate_img" alt="">
                            <p>{{item.cate_name}}</p>
                        </div>
                    </div>
                    <div class="list-item" v-if="typelist.length%2!=0"></div>
                </div>
            </div>
            <div class="type">
                <p class="title fs-32 center">全部分类</p>
                <div class="type-list flex wrap">
                    <div class="list-item center" v-for="item in typelist" @click="gototypes(item)">
                        <div class="center-col">
                            <img :src="item.cate_img" alt="">
                            <p>{{item.cate_name}}</p>
                        </div>
                    </div>
                    <div class="list-item" v-if="typelist.length%2!=0"></div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    data(){
        return{
            isBack:true,
            title:'电台分类',
            typelist:[
                // {
                //     icon:require('../../assets/account/ismusicmen.png'),
                //     text:'创作|翻唱'
                // },
                // {
                //     icon:require('../../assets/account/ismusicmen.png'),
                //     text:'创作|翻唱'
                // },
                // {
                //     icon:require('../../assets/account/ismusicmen.png'),
                //     text:'创作|翻唱'
                // },
                // {
                //     icon:require('../../assets/account/ismusicmen.png'),
                //     text:'创作|翻唱'
                // },
                // {
                //     icon:require('../../assets/account/ismusicmen.png'),
                //     text:'创作|翻唱'
                // },
                // {
                //     icon:require('../../assets/account/ismusicmen.png'),
                //     text:'创作|翻唱'
                // },
            ],
            hotcates:[]
        }
    },
    created(){
        this.gethotcateList()
        this.getallcateList()
    },
    methods:{
        gethotcateList(){
            let url = this.$host1 + `home/radio/cateList`
            this.$axios.get(url,{
                params:{
                    type:1
                }
            }).then(res => {
                console.log(res)
                //return
                if (res.status == 200) {
                let resData = res.data;
                if (resData.code == 200) {
                    this.hotcates=resData.data
                }else{
                    this.hotcates=[]
                    this.AlertWin(resData.message);
                }
                }
            }).catch(() => {
                this.hotcates=[]
                this.AlertWin("网络错误！请稍后重试！");
            });
        },
        getallcateList(){
            let url = this.$host1 + `home/radio/cateList`
            this.$axios.get(url,{
                params:{
                    type:2
                }
            }).then(res => {
                console.log(res)
                //return
                if (res.status == 200) {
                let resData = res.data;
                if (resData.code == 200) {
                    this.typelist=resData.data
                }else{
                    this.typelist=[]
                    this.AlertWin(resData.message);
                }
                }
            }).catch(() => {
                this.typelist=[]
                this.AlertWin("网络错误！请稍后重试！");
            });
        },
        gototypes(i){
            this.$router.push({
                path: '/types',
                query: {
                    type: i.id,
                }
            })
        }
    }
}
</script>
<style lang="scss">
.radiotypes{
    .content{
        padding-bottom: 0.5rem;
        box-sizing: border-box;
        width: 100%;
        height: auto;
        margin-top: 1rem;
        //background-color: greenyellow;
        .type{
            height: auto;
            width: 100%;
            .title{
                height: 1.5rem;
            }
            .type-list{
                border-top: 0.01rem solid #e9e9e9;
                .list-item{
                    border-bottom: 0.01rem solid #e9e9e9;
                    width: calc(50% - 0.01rem);
                    height: 0.8rem;
                    .center-col{
                        //background-color: greenyellow;
                        width: auto;
                        height: 100%;
                        p{
                            width:auto;
                            white-space:nowrap;
                        }
                        img{
                            height: 0.45rem;
                            width: auto;
                            margin-right: 0.2rem;
                        }
                    }
                   
                }
                .list-item:nth-of-type(odd){
                    border-right: 0.01rem solid #e9e9e9;
                }
            }
            
        }
    }
}
</style>